<!DOCTYPE html>
<html lang="en" xmlns:th="http://www/thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" th:href="@{/themes/default/easyui.css}">
    <link rel="stylesheet" th:href="@{/themes/icon.css}">
</head>
<body>
<table id="dg"></table>
<div id="toolbar">
    <a class="easyui-linkbutton" data-options="iconCls:'icon-add'" onclick="openAddDialog()">添加</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-edit'" onclick="openModifyDialog()">修改</a>
    <a class="easyui-linkbutton" data-options="iconCls:'icon-remove'" onclick="deleteUser()">删除</a><br>
    用户名:<input type="text" id="userName">
    用户角色：<input type="text" class="easyui-combobox" id="comb">
    <a onclick="searchUser()" class="easyui-linkbutton" data-options="iconCls:'icon-search'">搜索</a>
</div>
   <!--模态框-->
<div id="dlg" class="easyui-dialog" data-options="modal:true,width:600,height:350,
        closed:true,buttons:'#buttons',onClose:function(){$('#fm').form('clear')}" style="padding: 20px">
    <form id="fm" method="post">
        <table>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" name="userName" class="easyui-validatebox" data-options="required:true">
                </td>
                <td>用户密码：</td>
                <td>
                    <input type="password" id="pwd" name="password" class="easyui-validatebox" data-options="required:true">
                </td>
            </tr>
            <tr>
                <td>角色：</td>
                <td>
                    <input type="text" name="role.roleId" id="role" >
                </td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td>备注：</td>
                <td colspan="3">
                    <textarea name="userDescription" cols="50" rows="10"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
<div id="buttons">
    <a class="easyui-linkbutton" onclick="operate()" data-options="iconCls:'icon-ok'">保存</a>
    <a class="easyui-linkbutton" onclick="closeDlg()" data-options="iconCls:'icon-cancel'">关闭</a>
</div>

<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/js/jquery.easyui.min.js}"></script>
<script th:src="@{/js/easyui-lang-zh_CN.js}"></script>
 <script th:inline="javascript">
     var url=[[@{/}]]
 </script>
<script th:inline="none">
    $("#dg").datagrid({
        url:url+'user/findUser',
        toolbar:"#toolbar",
        pagination:true,
        title:'用户列表',
        fit:true,
        fitColumns:true,
        pageNumber:1,
        rownumbers:true,
        pageSize:5,
        pageList:[5,10,15],
        columns:[[
            {checkbox:true},
            {field:'userId',title:'编号',width:80,align:'center'},
            {field:'userName',title:'用户名',width:180,align:'center'},
            {field:'roleName',title:'用户角色',width:180,align:'center',formatter:function (value,row,index) {
                    return row.role.roleName;
                }},
            {field:'userDescription',title:'备注',width:280,align:'center'}
        ]]
    });


    $("#comb").combobox({
        url:url+'role/roleList',
        valueField:'roleId',
        textField:'roleName'
    })

    function searchUser(){
        //alert($("#comb").combobox("getValue"));
        $("#dg").datagrid("reload",{
            'userName':$("#userName").val(),
            'roleId':$("#comb").combobox("getValue")
        })
    }

    function openAddDialog() {
        $("#dlg").dialog("open")
            .dialog("setTitle","添加用户信息");
        $("#role").combobox({
            url:url+"role/roleList",
            valueField:'roleId',
            textField:'roleName'
        });
    }

    function operate() {
        $("#fm").form("submit",{
            url:url+"user/save",
            success:function(result){
                if(result == "success"){
                    $.messager.alert('系统提示','添加用户成功');
                    closeDlg();
                    //重新加载数据
                    $("#dg").datagrid("reload");
                }else{
                    $.messager.alert('系统提示','添加用户失败');
                }
            }
        })
    }

    function closeDlg(){
        $("#dlg").dialog("close");
        $("#fm").form("clear");
    }

    function openModifyDialog() {
        var rows = $("#dg").datagrid("getSelections");
        if(rows.length != 1){
            $.messager.alert('系统提示','请选择一条数据');
            return ;
        }
        $("#dlg").dialog("open").dialog("setTitle","修改用户信息");
        $("#fm").form("load",rows[0]);
        $("#role").combobox({
            url:url+"role/roleList",
            valueField:'roleId',
            textField:'roleName'
        });
        $("#pwd").val("");
    }

    function deleteUser() {
            var arr=$("#dg").datagrid("getSelections");
            var keys=[];
            for (var i=0;i<arr.length;i++){
                keys[i]=arr[i].userId;
            }
            $.ajax({
                url:url+"user/delete",
                type:"delete",
                data:"keys="+keys,
                success:function (result) {
                    if (result=="删除成功"){
                        alert(result);
                        //再次加载
                       window.location.reload();
                    }
                }
            })
        }
</script>
</body>
</html>